<template>
	<view class="content body">
		<view class="top">
			<view @click="particularsBooton(index)" v-for="(item, index) in ['商品详情', '常见问题', '商品参数', '租赁流程']" :key="index">
				<view class="group">
					<text>{{ item }}</text>
					<view :class="[particularsId === index ? 'top-bootom' : '']"></view>
				</view>
			</view>
		</view>
		<view class="details-img" v-show="status[0]">
			
			<!-- <text style="color: black;">商品详情</text> -->
			<image :src="url+id.detailImages"></image>
			<u-empty v-if="!id.detailImages" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

        <view class="details-img" v-show="status[1]">
        	
       <!-- 	<text style="color: black;">常见问题</text> -->
				<image :src="url+id.faqImages"></image>
				<u-empty v-if="!id.faqImages" mode="data" icon="/static/main/image2x.png"></u-empty>
        	<!-- <image :src="item"></image> -->
        </view>
        
		<view class="details-img" v-show="status[2]">
			
			<!-- <text style="color: black;">商品参数</text> -->
				<image :src="url+id.parameterImages"></image>
					<u-empty v-if="!id.parameterImages" mode="data" icon="/static/main/image2x.png"></u-empty>
			<!-- <image :src="item"></image> -->
		</view>
		
		<view class="details-img" v-show="status[3]">
			
			<!-- <text style="color: black;">租赁流程</text> -->
			<image :src="url+id.rentalProcessImages"></image>
			<u-empty v-if="!id.rentalProcessImages" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>
		<view>
				
		</view>
		<view class="bootom">
			<view class="name">为你推荐</view>
			<recommend :imageList="imgList"></recommend>
		</view>
	</view>
</template>

<script>
import recommend from '@/subPages/components/recommend.vue';
import api from '@/api/index.js';
import main from '@/api/main.js';
import {baseUrl} from "../../config.js"
export default {
	name: 'particulars',
	
	components: {
		recommend
	},
	props:["id"],
	properties: {
		detailsArray: {
			type: Array,
			value: [{}, {}, {}, {},{}]
		}
	},
	onLoad() {
		//this.list = this.detailsArray[0]?.split(',');
		
	},
	data() {
		return {
			particularsId: 0,
			list: [],
			imgList: [],
			status:[true,false,false,false],
			url:""
		};
	},
	mounted(){
		this.url = baseUrl;
		
		setTimeout(()=>{
			  console.log("666", this.id)
			  
		},500)
		
	},
	methods: {
		particularsBooton(row) {
			this.particularsId = row;
			this.status.forEach((item,index)=>{
				this.status[index] = false
			})
			this.status[row] = true;
		//	this.list = this.detailsArray[row]?.split(',');
		},
		getTag() {
			main.getTagArray({
				tag: '推荐'
			})
				.then((data) => {
					this.imgList = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	height: 100vh;
	padding-bottom: 120rpx;
}
.top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.group {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100rpx;
		.top-bootom {
			margin-top: 10rpx;
			width: 50rpx;
			height: 10rpx;
			background-color: #3b5dff;
			border-radius: 5rpx;
		}
	}
}

.details-img {
	image {
		width: 100%;
		height: 1000rpx;
		border-radius: 20rpx;
	}
}

.bootom {
	margin-top: 50rpx;
	padding-bottom: 220rpx;
	.name {
		font-weight: 600;
	}
}
</style>
